<template>
  <div :style="{ width, height }" ref="chartRef"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import echarts, { ECOption } from "../utils/echarts";

const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    option: ECOption;
  }>(),
  {
    width: "100%",
    height: "100%",
  }
);

const chartRef = ref<HTMLDivElement>();

const initEcharts = () => {
  const myChart = echarts.init(chartRef.value);
  myChart.setOption(props.option);
};

onMounted(initEcharts);
</script>

<style scoped></style>
